iT邦幫忙

2024 iThome 鐵人賽
DAY 17
0
自我挑戰組

asp.net可以變出那些功能系列 第 17 篇

權限設定:登入

16th鐵人賽
77 瀏覽

  • 分享至 

  • xImage
    •  

https://laihao2.com/Home/Login
https://ithelp.ithome.com.tw/upload/images/20240924/20119035bmJHSrL5PG.png

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表設定好>再寫程式:加入資料庫>串聯資料庫>
其實就也是跟昨天註冊是同一個資料表~
https://ithelp.ithome.com.tw/upload/images/20240924/20119035LOGWduCG0D.png

產生Models裡面類別檔dao>按:建置>

Controllers裡面的Entities> 這裡有把Controller裡面跟資料庫的連結也寫上

ProductDBContext _db = new ProductDBContext();
        NorthwindDBContext _db2 = new NorthwindDBContext();
        int pageSize = 10;
        //`GET` 方法是用來顯示登錄頁面的。
        [AllowAnonymous]
        public ActionResult Login()
        {
            return View();
        }
        //Post: Home/Login
        [AllowAnonymous]
        [HttpPost]
        public ActionResult Login(string fUserId, string fPwd)
        {
            // 依帳密取得會員並指定給member
            var member = _db.tMember
                .Where(m => m.fUserId == fUserId && m.fPwd == fPwd)
                .FirstOrDefault();
            //若member為null，表示會員未註冊
            if (member == null)
            {
                ViewBag.Message = "帳密錯誤，登入失敗";
                return View();
            }
            //使用Session變數記錄歡迎詞
            Session["WelCome"] = member.fName + ":登入中";
            //使用Session變數記錄登入的會員物件
            Session["Member"] = member;
            //執行Home控制器的Index動作方法
            return RedirectToAction("ElectricityList2");
        }

解釋程式碼
這個代碼片段屬於 ASP.NET MVC 框架，處理用戶登錄的功能。我們逐步解讀：

1. 數據庫上下文

ProductDBContext _db = new ProductDBContext();
NorthwindDBContext _db2 = new NorthwindDBContext();
int pageSize = 10;
  • _db 和 _db2：這兩行代碼分別初始化了 ProductDBContext 和 NorthwindDBContext，它們是數據庫上下文對象，通常用於訪問 ProductDB 和 NorthwindDB 數據庫中的數據。
  • pageSize：定義分頁的大小（每頁顯示 10 條記錄），不過此變量在這個片段中沒有使用。

2. GET 方法顯示登錄頁面

[AllowAnonymous]
public ActionResult Login()
{
    return View();
}
  • [AllowAnonymous]：表示這個動作方法可以在未經身份驗證的情況下訪問，即任何用戶都可以訪問登錄頁面。
  • ActionResult Login()：這是一個 GET 方法，用於顯示登錄頁面。
  • return View()：返回登錄頁面的視圖。

3. POST 方法處理登錄

[AllowAnonymous]
[HttpPost]
public ActionResult Login(string fUserId, string fPwd)
  • [HttpPost]：表示這個方法響應 POST 請求，它處理登錄表單的提交。
  • fUserId 和 fPwd：登錄表單提交的用戶名和密碼。

4. 通過用戶名和密碼獲取會員信息

var member = _db.tMember
    .Where(m => m.fUserId == fUserId && m.fPwd == fPwd)
    .FirstOrDefault();
  • 查詢會員信息：從 _db.tMember 表中查詢匹配的用戶，條件是 fUserId 和 fPwd（用戶名和密碼）。
  • FirstOrDefault()：返回匹配的第一條記錄，如果沒有找到匹配項，則返回 null。

5. 處理未注冊或錯誤的用戶

if (member == null)
{
    ViewBag.Message = "帳密錯誤，登入失敗";
    return View();
}
  • 檢查 member 是否為 null：如果查詢結果為 null，表示沒有匹配的用戶。
  • ViewBag.Message：使用 ViewBag 傳遞錯誤信息 "帳密錯誤，登入失敗"，通知用戶登錄失敗。
  • return View()：返回登錄頁面，顯示錯誤信息。

6. 成功登錄的處理

Session["WelCome"] = member.fName + ":登入中";
Session["Member"] = member;
return RedirectToAction("ElectricityList2");
  • Session["WelCome"]：將用戶的歡迎信息（例如 "張三:登入中"）存儲到 Session 中。
  • Session["Member"]：將登錄的 member 對象存儲到 Session 中，方便後續使用，比如在其它頁面識別用戶身份。
  • RedirectToAction("ElectricityList2")：成功登錄後，重定向到 ElectricityList2 動作方法（應該是首頁或某個功能頁）。

總結

這個控制器方法通過用戶名和密碼驗證用戶身份。如果登錄成功，將用戶信息存入 Session 並重定向到新頁面；如果失敗，則顯示錯誤信息並返回登錄頁面。

產生畫面View程式碼

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Login";
}


<h2>作品-權限設定</h2>
<h3>依照不同帳號跟密碼登入看到的內容不同</h3>
<h3>範例:帳號A01密碼A01跟帳號A02密碼A02,帳號A01密碼A01可以看到修改按鈕</h3>


<h2>登入Login</h2>

<form action="@Url.Action("Login")" method="post">
    <div class="form-horizontal">
        <hr />
        <div class="form-group">
            <span class="control-label col-md-2">帳號account</span>
            <div class="col-md-10">
                <input type="text" id="fUserId" name="fUserId" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <span class="control-label col-md-2">密碼password</span>
            <div class="col-md-10">
                <input type="password" id="fPwd" name="fPwd" required="required" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="登入Login" class="btn btn-default" />
                @ViewBag.Message
            </div>
        </div>
    </div>
</form>

解釋程式碼
這段程式碼是使用 ASP.NET MVC 架構來建立一個簡單的登入頁面。讓我逐步解釋每個部分的作用：

1. @{ Layout = "~/Views/Shared/_Layout.cshtml"; }

這行指定了頁面所使用的母版頁面 (_Layout.cshtml)，所有頁面共用的樣式和結構會來自這個母版頁面。這是一種 MVC 中的共用佈局方式，讓不同頁面共用相同的外觀。

2. @{ ViewBag.Title = "Login"; }

這行用來設定頁面的標題，這個值會在母版頁面中顯示。 ViewBag.Title 會將字串 "Login" 傳遞給母版頁面的標題區域。

3. <h2>作品-權限設定</h2> 和 <h3>

這些標籤定義了頁面的標題和副標題，描述了這個登入頁面的功能。副標題說明不同帳號密碼登入後會顯示不同的內容，比如帳號 A01 登入後可以看到修改按鈕，而帳號 A02 則無法。

4. <form action="@Url.Action("Login")" method="post">

這段定義了一個表單，表單的 action 是指向 Login 動作方法，並透過 POST 請求提交表單數據。 @Url.Action("Login") 會生成指向控制器中 Login 方法的 URL。

5. <div class="form-horizontal">

這行是表單的容器，使用了 Bootstrap 提供的 form-horizontal 類別來設定表單的樣式，讓它以水平方式排列。

6. 帳號和密碼輸入框

<div class="form-group">
    <span class="control-label col-md-2">帳號account</span>
    <div class="col-md-10">
        <input type="text" id="fUserId" name="fUserId" required="required" class="form-control" />
    </div>
</div>

這段程式碼是用來生成帳號輸入框。<input> 標籤的 name="fUserId" 表示這個欄位的名稱，會在提交表單時將值傳送到伺服器。required="required" 使得這個欄位成為必填，class="form-control" 則是 Bootstrap 的樣式，用來設置漂亮的輸入框。

密碼輸入框的結構與帳號類似，只是輸入類型變成了 type="password"，以隱藏密碼輸入。

7. 表單提交按鈕和訊息

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="登入Login" class="btn btn-default" />
        @ViewBag.Message
    </div>
</div>

這段生成了表單的提交按鈕。<input type="submit"> 創建了一個按鈕，當使用者點擊它時，表單會被提交。@ViewBag.Message 用來顯示從控制器傳回的訊息，通常是登入失敗或成功的提示。

總結

這段程式碼建立了一個基本的登入表單，透過 POST 請求將帳號和密碼提交給伺服器，伺服器可以驗證使用者並給予不同的權限顯示不同的內容。表單樣式運用了 Bootstrap 來確保美觀性。

列表:電費_有權限設定
依照不同帳號跟密碼登入看到的內容不同
範例:帳號A01密碼A01跟帳號A02密碼A02,帳號A01密碼A01可以看到修改按鈕
http://localhost/Web1/Home/ElectricityList2
https://ithelp.ithome.com.tw/upload/images/20240924/20119035wIdqbJnOTw.png

ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View

資料表設定好>再寫程式:加入資料庫>串聯資料庫>
詳細串聯的方法可以參考前幾天~

USE [ProductDB]
GO

/****** Object:  Table [dbo].[ELECTRICITY_BILL]    Script Date: 2024/9/21 下午 03:05:38 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[ELECTRICITY_BILL](
	[DOCUMENT_ID] [nvarchar](200) NOT NULL,
	[FACTORY] [nvarchar](200) NULL,
	[ELECTRICITY_SIGNAL] [nvarchar](200) NULL,
	[FROM_BILLING_PERIOD] [datetime2](7) NULL,
	[UNTIL_BILLING_PERIOD] [datetime2](7) NULL,
	[PEAK_ELECTRICITY] [decimal](18, 2) NULL,
	[HALF_SPIKE_POWER] [decimal](18, 2) NULL,
	[SATURDAY_HALF_PEAK] [decimal](18, 2) NULL,
	[OFF_PEAK_ELECTRICITY] [decimal](18, 2) NULL,
	[TOTAL_ELECTRICITY] [decimal](18, 2) NULL,
	[TOTAL_BILL_TAX] [decimal](18, 2) NULL,
	[CARBON_PERIOD] [decimal](18, 2) NULL,
	[CARBON_EMISSION_FACTOR] [decimal](18, 2) NULL,
	[CARBON_DIOXIDE] [decimal](18, 2) NULL,
	[data] [datetime] NULL,
	[CreatedBy] [nvarchar](max) NULL,
	[PDF_FILE] [varbinary](max) NULL,
	[ImageMimeType] [nvarchar](max) NULL,
	[PDF_CONTENT] [varbinary](max) NULL,
	[VOUCHER_NUMBER] [nvarchar](200) NULL,
 CONSTRAINT [PK_ELECTRICITY_BILL] PRIMARY KEY CLUSTERED 
(
	[DOCUMENT_ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

樣子
https://ithelp.ithome.com.tw/upload/images/20240924/20119035cBsxO2s2mU.png
解釋sql
這段 SQL 代碼用於在 ProductDB 數據庫中創建一個名為 ELECTRICITY_BILL 的表，結構及其功能如下：

表結構：

  • DOCUMENT_ID (nvarchar(200), NOT NULL)：這是該表的主鍵，用來唯一標識每個記錄。
  • FACTORY (nvarchar(200), NULL)：可能用來表示工廠的名稱或代號，儲存電力賬單與某個工廠的關聯。
  • ELECTRICITY_SIGNAL (nvarchar(200), NULL)：表示電力信號（例如，電力類型或識別電力信號的標記）。
  • FROM_BILLING_PERIOD (datetime2(7), NULL)：電力賬單的開始周期時間。
  • UNTIL_BILLING_PERIOD (datetime2(7), NULL)：電力賬單的結束周期時間。
  • PEAK_ELECTRICITY (decimal(18, 2), NULL)：記錄高峰期使用的電量。
  • HALF_SPIKE_POWER (decimal(18, 2), NULL)：記錄半尖峰時段的電力使用量。
  • SATURDAY_HALF_PEAK (decimal(18, 2), NULL)：記錄周六半尖峰時段的電力使用量。
  • OFF_PEAK_ELECTRICITY (decimal(18, 2), NULL)：記錄非高峰時段的電力使用量。
  • TOTAL_ELECTRICITY (decimal(18, 2), NULL)：記錄總電力使用量。
  • TOTAL_BILL_TAX (decimal(18, 2), NULL)：記錄賬單總稅額。
  • CARBON_PERIOD (decimal(18, 2), NULL)：記錄與該賬單周期相關的碳排放量。
  • CARBON_EMISSION_FACTOR (decimal(18, 2), NULL)：記錄碳排放系數，用於計算碳排放量。
  • CARBON_DIOXIDE (decimal(18, 2), NULL)：記錄碳排放的總二氧化碳量。
  • data (datetime, NULL)：存儲記錄的創建日期或與賬單相關的數據。
  • CreatedBy (nvarchar(max), NULL)：記錄創建此賬單的用戶。
  • PDF_FILE (varbinary(max), NULL)：保存賬單的PDF文件（二進制形式）。
  • ImageMimeType (nvarchar(max), NULL)：記錄PDF文件的MIME類型。
  • PDF_CONTENT (varbinary(max), NULL)：另一個用於存儲PDF內容的字段。
  • VOUCHER_NUMBER (nvarchar(200), NULL)：賬單憑證號。

約束：

  • PK_ELECTRICITY_BILL：主鍵約束，確保 DOCUMENT_ID 的唯一性。

關鍵點：

  • 表允許鎖定行和頁，以優化查詢和寫入操作。
  • 通過 PDF_FILE 和 PDF_CONTENT 字段保存賬單的PDF文件。
  • 包含多種電力使用數據和碳排放信息，可能用於生成詳細的能源報告。

這張表設計來記錄工廠的電費賬單及相關的碳排放信息，也保存了賬單的文件供後續參考。

產生Models裡面類別檔dao>按:建置>

namespace WebApplication5.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;
    using System.Data.Entity.Spatial;
   
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    [Table("ELECTRICITY_BILL")]
    public partial class ELECTRICITY_BILL
    {
        [Display(Name = "通知單號碼")]
        [Required(ErrorMessage = "必填")]
        [Key]
        [StringLength(200)]
        public string DOCUMENT_ID { get; set; }




        [Display(Name = "廠區")]
        [StringLength(200)]
        public string FACTORY { get; set; }
        [Display(Name = "電號")]
        [StringLength(200)]
        public string ELECTRICITY_SIGNAL { get; set; }
        [Display(Name = "計費期間起")]
        [Column(TypeName = "datetime2")]
        public DateTime? FROM_BILLING_PERIOD { get; set; }
        public string FormattedFROM_BILLING_PERIOD
        {
            get
            {
                return FROM_BILLING_PERIOD?.ToString("yyyy-MM-dd");
            }
        }

        [Display(Name = "計費期間迄")]
        [Column(TypeName = "datetime2")]
        public DateTime? UNTIL_BILLING_PERIOD { get; set; }
        public string FormattedUNTIL_BILLING_PERIOD
        {
            get
            {
                return UNTIL_BILLING_PERIOD?.ToString("yyyy-MM-dd");
            }
        }

        [Display(Name = "尖峰用電度數")]
        public decimal? PEAK_ELECTRICITY { get; set; }

        public string FormattedPEAK_ELECTRICITY
        {
            get
            {
                return PEAK_ELECTRICITY?.ToString("#,##0");
                //return PEAK_ELECTRICITY?.ToString("0");
            }
        }

        [Display(Name = "半尖峰用電度數")]
        public decimal? HALF_SPIKE_POWER { get; set; }

        public string FormattedHALF_SPIKE_POWER
        {
            get
            {
                return HALF_SPIKE_POWER?.ToString("#,##0");
                //return HALF_SPIKE_POWER?.ToString("0");
            }
        }

        [Display(Name = "週六半尖峰用電度數")]
        public decimal? SATURDAY_HALF_PEAK { get; set; }

        public string FormattedSATURDAY_HALF_PEAK
        {
            get
            {
                return SATURDAY_HALF_PEAK?.ToString("#,##0");
                //return SATURDAY_HALF_PEAK?.ToString("0");
            }
        }

        [Display(Name = "離峰用電度數")]
        public decimal? OFF_PEAK_ELECTRICITY { get; set; }
        public string FormattedOFF_PEAK_ELECTRICITY
        {
            get
            {
                return OFF_PEAK_ELECTRICITY?.ToString("#,##0");
                //return OFF_PEAK_ELECTRICITY?.ToString("0");
            }
        }

        [Display(Name = "總用電數")]
        public decimal? TOTAL_ELECTRICITY { get; set; }
        public string FormattedTOTAL_ELECTRICITY
        {
            get
            {
                return TOTAL_ELECTRICITY?.ToString("#,##0");
                //return TOTAL_ELECTRICITY?.ToString("0");
            }
        }
        [Display(Name = "總電費(含稅)")]
        public decimal? TOTAL_BILL_TAX { get; set; }

        public string FormattedTOTAL_BILL_TAX
        {
            get
            {
                //return TOTAL_BILL_TAX?.ToString("#,##0");
                return TOTAL_BILL_TAX?.ToString("C0");
                //顯示成金額格式
            }
        }

        [Display(Name = "本期碳排量")]
        public decimal? CARBON_PERIOD { get; set; }

        public string FormattedCARBON_PERIOD
        {
            get
            {
                return CARBON_PERIOD?.ToString("#,##0");
                //return CARBON_PERIOD?.ToString("0");
            }
        }

        [Display(Name = "碳排係數")]
        public decimal? CARBON_EMISSION_FACTOR { get; set; }
        [Display(Name = "二氧化碳當量")]

        public decimal? CARBON_DIOXIDE { get; set; }
        [Display(Name = "建立時間")]
        public DateTime? data { get; set; }
        [Display(Name = "建立者")]
        public string CreatedBy { get; set; }

        [Display(Name = "電費繳費通知單:上傳 PDF 檔案")]
        [MaxLength]
        public byte[] PDF_FILE { get; set; }

        [HiddenInput(DisplayValue = false)]
        public string ImageMimeType { get; set; }


        [Display(Name = "電費繳費通知單:上傳(最大2MB)")]
        public byte[] PDF_CONTENT { get; set; }

        [Display(Name = "傳票號碼")]
        [StringLength(200)]
        public string VOUCHER_NUMBER { get; set; }

    }

}

解釋程式碼

這個代碼定義了一個名為 ELECTRICITY_BILL 的實體類，主要用於表示電費單數據。在 ASP.NET MVC 項目中，這個類利用了 Entity Framework 來映射數據庫中的 ELECTRICITY_BILL 表，並使用 Data Annotations 進行數據驗證和屬性顯示。下面是該類的詳細解釋：

1. 類聲明與命名空間

  • namespace WebApplication5.Models: 這是類所在的命名空間，通常與項目名相關聯。
  • public partial class ELECTRICITY_BILL: 這是一個實體類，使用 partial 關鍵字允許該類在多個文件中定義。
  • [Table("ELECTRICITY_BILL")]: 表示該類對應數據庫中的 ELECTRICITY_BILL 表。

2. 主要屬性

  • DOCUMENT_ID:

    • [Key]: 這是主鍵字段，唯一標識每條記錄。
    • [Required(ErrorMessage = "必填")]: 表示該字段是必填項，如果為空，會顯示 "必填" 的錯誤信息。
    • [StringLength(200)]: 限制字符串長度為 200。
    • [Display(Name = "通知單號碼")]: 前端顯示為 "通知單號碼"。

  • FACTORY、ELECTRICITY_SIGNAL:

    • 這兩個屬性是表示工廠和電號的字符串字段，前端顯示名稱分別為 "廠區" 和 "電號"。

  • FROM_BILLING_PERIOD、UNTIL_BILLING_PERIOD:

    • 這是兩個 DateTime? 類型的屬性，表示計費期間的開始和結束時間。
    • [Column(TypeName = "datetime2")]: 在數據庫中使用 datetime2 類型存儲。
    • FormattedFROM_BILLING_PERIOD 和 FormattedUNTIL_BILLING_PERIOD 是計算屬性，用於將日期格式化為 yyyy-MM-dd 的字符串。

  • PEAK_ELECTRICITY、HALF_SPIKE_POWER、SATURDAY_HALF_PEAK、OFF_PEAK_ELECTRICITY、TOTAL_ELECTRICITY:

    • 這些屬性代表用電度數的不同分類，都是 decimal? 類型。
    • 它們都有對應的格式化屬性（如 FormattedPEAK_ELECTRICITY），用於格式化顯示度數（格式為 #,##0，即千位分隔符）。

  • TOTAL_BILL_TAX:

    • 表示總電費金額（含稅），decimal? 類型。
    • FormattedTOTAL_BILL_TAX: 將金額格式化為貨幣格式（C0，即無小數點的貨幣形式）。

  • CARBON_PERIOD、CARBON_EMISSION_FACTOR、CARBON_DIOXIDE:

    • 這些屬性表示碳排放相關數據，分別是本期碳排量、碳排放系數和二氧化碳當量。

  • CreatedBy:

    • 表示創建者，通常存儲操作該記錄的用戶信息。

  • PDF_FILE、PDF_CONTENT:

    • 這兩個 byte[] 類型的屬性用於存儲 PDF 文件的數據。
    • [MaxLength]: 表示字段的最大長度，可以存儲大數據。

  • ImageMimeType:

    • 用於存儲文件的 MIME 類型，在該上下文中可能是上傳的 PDF 文件的類型。

  • VOUCHER_NUMBER:

    • 表示傳票號，前端顯示名稱為 "傳票號碼"。

3. 額外功能

  • HiddenInput(DisplayValue = false): 隱藏字段不在用戶界面顯示。
  • 格式化屬性（如 FormattedTOTAL_ELECTRICITY）可以方便地將原始數據轉化為更加人性化的顯示格式，避免在視圖層編寫覆雜的邏輯。

總結

這個類展示了一個電費賬單的基本信息，其中包含了電費單的編號、工廠信息、用電量、碳排放以及上傳的 PDF 文件等。通過使用 Data Annotations 進行驗證和格式化，它為前端視圖提供了友好的展示和用戶輸入校驗。

ProductDBContext也要填上，可以參考前面說明
https://ithelp.ithome.com.tw/upload/images/20240924/20119035UiGG1OYRAU.png
Controllers裡面的Entities>

[AllowAnonymous]
        public ActionResult ElectricityList2(string factory = "")
        {
            ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";

            var currentUser = Session["Member"] as tMember;
            // 檢索當前用戶的UpdateRight值
            string updateRight = GetUserUpdateRight(currentUser);
            var list = _db.tMember.ToList();


            var customers = _db.ELECTRICITY_BILL.ToList();
            DateTime startDate;
            DateTime endDate;

            if (!String.IsNullOrEmpty(Request.QueryString["startDate"]))
            {
                startDate = DateTime.Parse(Request.QueryString["startDate"]);
            }
            else
            {
                startDate = DateTime.MinValue;
            }

            if (!String.IsNullOrEmpty(Request.QueryString["endDate"]))
            {
                endDate = DateTime.Parse(Request.QueryString["endDate"]);
            }
            else
            {
                endDate = DateTime.MaxValue;
            }


            var ESGs = _db.ELECTRICITY_BILL
            .OrderByDescending(x => x.FROM_BILLING_PERIOD)
            .Where(x => x.FROM_BILLING_PERIOD >= startDate &&
            x.FROM_BILLING_PERIOD <= endDate)
            .ToList();
            if (!string.IsNullOrEmpty(factory))
            {
                ESGs = ESGs.Where(x => x.FACTORY == factory).ToList();
            }




            ViewBag.UpdateRight = updateRight;
            // 20240326將 PDF 檔案內容傳遞給視圖
            foreach (var item in customers)
            {
                item.ImageMimeType = "application/pdf";
            }
            return View(ESGs);

        }
        // 添加一個方法來檢索當前用戶的UpdateRight值
        private string GetUserUpdateRight(tMember user)
        {
            if (user != null)
            {
                // 假設UpdateRight是tMember類中的屬性
                return user.UpdateRight;
            }

            // 返回默認值或處理用戶不可用的情況
            return "N";
        }

解釋程式碼

這段代碼定義了一個名為 ElectricityList2 的 ASP.NET MVC 控制器方法，用於檢索並返回電力賬單的列表，並根據用戶的權限決定頁面的顯示。

代碼解釋：

  1. [AllowAnonymous]：

    • 這個屬性允許匿名用戶訪問 ElectricityList2 動作方法。即使用戶未登錄，也可以調用該方法。

  2. public ActionResult ElectricityList2(string factory = "")：

    • 定義一個名為 ElectricityList2 的控制器方法，返回一個 ActionResult，方法的參數是 factory，默認為空字符串。
    • factory 是用來過濾電力賬單的工廠名稱。

  3. ViewBag.Layout：

    • 設置視圖的布局文件路徑。這里使用了共享布局 _Layout.cshtml。

  4. var currentUser = Session["Member"] as tMember：

    • 從會話 Session 中獲取當前登錄用戶（tMember 類型），並將其存儲在 currentUser 變量中。
    • Session["Member"] 用於從服務器端的會話中存儲用戶信息。

  5. string updateRight = GetUserUpdateRight(currentUser)：

    • 調用私有方法 GetUserUpdateRight，獲取當前用戶的 UpdateRight 權限。
    • UpdateRight 應該是 tMember 類的一個屬性，用於判斷用戶是否有更新權限。

  6. var list = _db.tMember.ToList()：

    • 檢索 tMember 表中的所有記錄，並將其轉換為列表存儲在 list 中。

  7. var customers = _db.ELECTRICITY_BILL.ToList()：

    • 檢索 ELECTRICITY_BILL 表中的所有記錄，並將其轉換為列表存儲在 customers 中。

  8. 處理查詢字符串中的 startDate 和 endDate：

    • 從請求的查詢字符串中獲取 startDate 和 endDate。
    • 如果沒有提供日期，默認使用 DateTime.MinValue 和 DateTime.MaxValue，即沒有限制的時間範圍。

  9. 檢索並篩選電力賬單記錄：

    • 使用 LINQ 查詢從 ELECTRICITY_BILL 表中檢索所有記錄，並根據 FROM_BILLING_PERIOD 過濾賬單的時間範圍。
    • 如果傳遞了 factory 參數，進一步過濾記錄，確保只包含指定工廠的數據。

  10. ViewBag.UpdateRight：

    • 將 updateRight 值存儲在 ViewBag 中，方便在視圖中使用該值來確定用戶是否有權限進行某些操作。

  11. PDF文件處理：

    • 在遍歷 customers 列表時，將每個賬單的 ImageMimeType 屬性設置為 "application/pdf"。這可能用於在視圖中渲染 PDF 文件。

  12. return View(ESGs)：

    • 返回篩選後的 ESGs（電力賬單列表）給視圖，視圖將使用這些數據進行渲染。

GetUserUpdateRight 方法：

  • 該方法用於獲取當前用戶的 UpdateRight 權限。
  • 如果用戶對象不為空，則返回用戶的 UpdateRight 屬性值。
  • 如果用戶對象為空，返回一個默認值 "N"（表示沒有權限）。

總結：

這段代碼的目的是在前端頁面展示電力賬單記錄，用戶可以通過選擇時間範圍和工廠來過濾賬單。同時，通過 UpdateRight 權限控制，系統將確定用戶是否有修改權限。

產生畫面View程式碼

@model IEnumerable<WebApplication5.Models.ELECTRICITY_BILL>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "ElectricityList2";
}


<h2>作品-電費</h2>
<h3>依照電費看到的內容</h3>


<style>
    .align-right {
        text-align: right;
    }
</style>



<div style="margin-top: 50px;">
    <h2>電費:列表</h2>
    <p>
        @*@Html.ActionLink("電費:新增", "ElectricityCreate")*@
        @Html.ActionLink("電費:新增", "ElectricityCreate", null, new { @class = "btn btn-danger" })
    
    </p>
            <form method="get" action="@Url.Action("ElectricityList", "Home")">


                <label for="startDate">開始日期：</label>
                <input type="date" name="startDate">

                <label for="endDate">結束日期：</label>
                <input type="date" name="endDate">

                <button type="submit">搜索</button>
            </form>
        </div>
        @using (Html.BeginForm())
        {
            <label>廠區:</label>

            @Html.DropDownList("factory", new List<SelectListItem>
        {
          new SelectListItem { Value = "永康廠", Text = "永康廠/電號:01-23-4567-89-0" },
          new SelectListItem { Value = "永科廠", Text = "永科廠/電號:01-23-4567-89-1" }

        })

            <input type="submit" value="搜索" />
        }
        <table class="table" style="margin-top: 20px;">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.DOCUMENT_ID)
                    </th>

                    <th>
                        @Html.DisplayNameFor(model => model.FROM_BILLING_PERIOD)

                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.UNTIL_BILLING_PERIOD)

                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.PEAK_ELECTRICITY)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.HALF_SPIKE_POWER)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.SATURDAY_HALF_PEAK)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.OFF_PEAK_ELECTRICITY)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.TOTAL_ELECTRICITY)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.TOTAL_BILL_TAX)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.CARBON_PERIOD)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.VOUCHER_NUMBER)
                    </th>
                    <th>
                        電費繳費通知單:上傳
                    </th>


                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.DOCUMENT_ID)
                        </td>


                        <td>
                            @*@Html.DisplayFor(modelItem => item.FROM_BILLING_PERIOD)*@
                            @Html.DisplayFor(modelItem => item.FormattedFROM_BILLING_PERIOD)
                            </td>
                            <td>
                                @*@Html.DisplayFor(modelItem => item.UNTIL_BILLING_PERIOD)*@
                                @Html.DisplayFor(modelItem => item.FormattedUNTIL_BILLING_PERIOD)
                            </td>
                            <td class="align-right">
                                @*@Html.DisplayFor(modelItem => item.PEAK_ELECTRICITY)*@
                                @Html.DisplayFor(modelItem => item.FormattedPEAK_ELECTRICITY)
                            </td>
                            <td class="align-right">
                                @*@Html.DisplayFor(modelItem => item.HALF_SPIKE_POWER)*@
                                @Html.DisplayFor(modelItem => item.FormattedHALF_SPIKE_POWER)
                            </td>
                            <td class="align-right">
                                @*@Html.DisplayFor(modelItem => item.SATURDAY_HALF_PEAK)*@
                                @Html.DisplayFor(modelItem => item.FormattedSATURDAY_HALF_PEAK)
                            </td>
                            <td class="align-right">
                                @*@Html.DisplayFor(modelItem => item.OFF_PEAK_ELECTRICITY)*@
                                @Html.DisplayFor(modelItem => item.FormattedOFF_PEAK_ELECTRICITY)
                            </td>
                            <td class="align-right">
                                @*@Html.DisplayFor(modelItem => item.TOTAL_ELECTRICITY)*@
                                @Html.DisplayFor(modelItem => item.FormattedTOTAL_ELECTRICITY)
                            </td>
                            <td class="align-right">
                                @*@Html.DisplayFor(modelItem => item.TOTAL_BILL_TAX)*@
                                @Html.DisplayFor(modelItem => item.FormattedTOTAL_BILL_TAX)
                            </td>
                            <td class="align-right">
                                @*@Html.DisplayFor(modelItem => item.CARBON_PERIOD)*@
                                @Html.DisplayFor(modelItem => item.FormattedCARBON_PERIOD)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.VOUCHER_NUMBER)
                            </td>

                            <td>
                                @if (item.PDF_CONTENT != null && item.PDF_CONTENT.Length > 0)
                                {
                                    <a href="@Url.Action("GetPdfFile1", "Home", new { id = item.DOCUMENT_ID })" target="_blank">檢視 PDF 檔案</a>
                                }
                                else
                                {
                                    <span>沒有上傳 PDF 檔案</span>
                                }
                            </td>


                            <td>
                                @*@Html.ActionLink("修改", "ElectricityEdit", new { id = item.DOCUMENT_ID })*@

                                @if (ViewBag.UpdateRight == "Y")
        {
        @Html.ActionLink("修改", "ElectricityEdit", new { id = item.DOCUMENT_ID })
        }
                            </td>
                            </tr>
                            }
                            </tbody>
                            </table>
                            </body>
                            </html>

解釋程式碼
這段程式碼是一個使用 ASP.NET MVC 框架和 Razor 語法撰寫的視圖（View），用於顯示和管理電費相關的資料。以下是對程式碼的詳細解釋：

1. 模型和布局設定

@model IEnumerable<WebApplication5.Models.ELECTRICITY_BILL>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "ElectricityList2";
}
  • @model: 定義這個視圖使用的模型類型為 IEnumerable<WebApplication5.Models.ELECTRICITY_BILL>，即一個電費帳單的集合。
  • Layout: 指定這個視圖所使用的佈局頁面為 ~/Views/Shared/_Layout.cshtml，這樣可以重用網站的統一樣式和結構。
  • ViewBag.Title: 設定頁面的標題為 "ElectricityList2"，這個標題通常會顯示在瀏覽器的標題欄或佈局頁面中。

2. 標題和樣式

<h2>作品-電費</h2>
<h3>依照電費看到的內容</h3>

<style>
    .align-right {
        text-align: right;
    }
</style>
  • 標題: 顯示主要標題 "作品-電費" 和副標題 "依照電費看到的內容"。
  • CSS 樣式: 定義了一個名為 .align-right 的 CSS 類，用於將文本對齊到右邊。

3. 電費列表和新增按鈕

<div style="margin-top: 50px;">
    <h2>電費:列表</h2>
    <p>
        @Html.ActionLink("電費:新增", "ElectricityCreate", null, new { @class = "btn btn-danger" })
    </p>
  • 電費列表標題: 顯示 "電費:列表"。
  • 新增按鈕: 使用 @Html.ActionLink 創建一個連結按鈕，文字為 "電費:新增"，導航到 ElectricityCreate 動作方法，並應用了 Bootstrap 的 btn btn-danger 樣式，使按鈕呈現紅色。

4. 搜索表單（日期範圍）

<form method="get" action="@Url.Action("ElectricityList", "Home")">
    <label for="startDate">開始日期：</label>
    <input type="date" name="startDate">

    <label for="endDate">結束日期：</label>
    <input type="date" name="endDate">

    <button type="submit">搜索</button>
</form>
  • 表單: 使用 GET 方法提交到 Home 控制器的 ElectricityList 動作方法。
  • 日期輸入: 包含兩個日期選擇器，分別為 "開始日期" 和 "結束日期"。
  • 提交按鈕: 標示為 "搜索"，用於提交表單進行資料篩選。

5. 搜索表單（廠區篩選）

@using (Html.BeginForm())
{
    <label>廠區:</label>

    @Html.DropDownList("factory", new List<SelectListItem>
    {
        new SelectListItem { Value = "永康廠", Text = "永康廠/電號:01-23-4567-89-0" },
        new SelectListItem { Value = "永科廠", Text = "永科廠/電號:01-23-4567-89-1" }
    })

    <input type="submit" value="搜索" />
}
  • 表單: 使用默認的 POST 方法提交表單。
  • 下拉選單: 提供兩個選項 "永康廠" 和 "永科廠"，每個選項都包含對應的電號。
  • 提交按鈕: 標示為 "搜索"，用於提交廠區篩選條件。

6. 電費資料表格

<table class="table" style="margin-top: 20px;">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.DOCUMENT_ID)</th>
            <th>@Html.DisplayNameFor(model => model.FROM_BILLING_PERIOD)</th>
            <th>@Html.DisplayNameFor(model => model.UNTIL_BILLING_PERIOD)</th>
            <th>@Html.DisplayNameFor(model => model.PEAK_ELECTRICITY)</th>
            <th>@Html.DisplayNameFor(model => model.HALF_SPIKE_POWER)</th>
            <th>@Html.DisplayNameFor(model => model.SATURDAY_HALF_PEAK)</th>
            <th>@Html.DisplayNameFor(model => model.OFF_PEAK_ELECTRICITY)</th>
            <th>@Html.DisplayNameFor(model => model.TOTAL_ELECTRICITY)</th>
            <th>@Html.DisplayNameFor(model => model.TOTAL_BILL_TAX)</th>
            <th>@Html.DisplayNameFor(model => model.CARBON_PERIOD)</th>
            <th>@Html.DisplayNameFor(model => model.VOUCHER_NUMBER)</th>
            <th>電費繳費通知單:上傳</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(modelItem => item.DOCUMENT_ID)</td>
                <td>@Html.DisplayFor(modelItem => item.FormattedFROM_BILLING_PERIOD)</td>
                <td>@Html.DisplayFor(modelItem => item.FormattedUNTIL_BILLING_PERIOD)</td>
                <td class="align-right">@Html.DisplayFor(modelItem => item.FormattedPEAK_ELECTRICITY)</td>
                <td class="align-right">@Html.DisplayFor(modelItem => item.FormattedHALF_SPIKE_POWER)</td>
                <td class="align-right">@Html.DisplayFor(modelItem => item.FormattedSATURDAY_HALF_PEAK)</td>
                <td class="align-right">@Html.DisplayFor(modelItem => item.FormattedOFF_PEAK_ELECTRICITY)</td>
                <td class="align-right">@Html.DisplayFor(modelItem => item.FormattedTOTAL_ELECTRICITY)</td>
                <td class="align-right">@Html.DisplayFor(modelItem => item.FormattedTOTAL_BILL_TAX)</td>
                <td class="align-right">@Html.DisplayFor(modelItem => item.FormattedCARBON_PERIOD)</td>
                <td>@Html.DisplayFor(modelItem => item.VOUCHER_NUMBER)</td>
                <td>
                    @if (item.PDF_CONTENT != null && item.PDF_CONTENT.Length > 0)
                    {
                        <a href="@Url.Action("GetPdfFile1", "Home", new { id = item.DOCUMENT_ID })" target="_blank">檢視 PDF 檔案</a>
                    }
                    else
                    {
                        <span>沒有上傳 PDF 檔案</span>
                    }
                </td>
                <td>
                    @if (ViewBag.UpdateRight == "Y")
                    {
                        @Html.ActionLink("修改", "ElectricityEdit", new { id = item.DOCUMENT_ID })
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

  • 表格標頭（thead）: 使用 @Html.DisplayNameFor 方法動態獲取模型屬性的顯示名稱，如 DOCUMENT_ID、FROM_BILLING_PERIOD 等。最後一欄標題為 "電費繳費通知單:上傳"。

  • 表格內容（tbody）: 使用 @foreach 迴圈遍歷模型中的每一個電費帳單（item），並為每個帳單生成一行（<tr>）。

    • 資料欄位:

      • @Html.DisplayFor 用於顯示每個屬性的值。例如，item.DOCUMENT_ID 顯示文件ID，item.FormattedFROM_BILLING_PERIOD 顯示格式化後的開始計費期間。
      • 部分欄位應用了 .align-right 類，使數值右對齊，增強可讀性。

    • PDF 檔案連結:

      • 檢查 item.PDF_CONTENT 是否存在且有內容。
      • 如果存在，顯示一個連結 "檢視 PDF 檔案"，點擊後會打開 Home 控制器的 GetPdfFile1 動作方法，並傳遞 DOCUMENT_ID 作為參數，以顯示相應的 PDF 檔案。
      • 如果不存在，顯示文字 "沒有上傳 PDF 檔案"。

    • 修改連結:

      • 檢查 ViewBag.UpdateRight 是否為 "Y"（表示有修改權限）。
      • 如果有權限，顯示一個 "修改" 的連結，導航到 ElectricityEdit 動作方法，並傳遞 DOCUMENT_ID 作為參數。

7. 結尾標籤

</body>
</html>
  • 結束 HTML 文件的 body 和 html 標籤。

總結

這個視圖主要功能包括：

  • 顯示電費帳單的列表，包含多個屬性如計費期間、用電量、稅金等。
  • 提供篩選功能，允許用戶根據日期範圍和廠區進行搜索。
  • 提供新增電費帳單的按鈕。
  • 顯示每筆帳單是否有上傳的 PDF 檔案，並提供檢視連結。
  • 根據使用者權限，顯示修改帳單的連結。

這樣的設計有助於用戶有效地管理和查看電費相關的數據，並且透過篩選和權限控制，提升了系統的靈活性和安全性。

大家明天見~
/images/emoticon/emoticon01.gif


上一篇
權限設定:註冊
下一篇
顯示圖片連結:滅火器
系列文
asp.net可以變出那些功能 共 30 篇
  1. 26
    現在很流行的VUE
  2. 27
    簡約風
  3. 28
    簡約風首頁看留言的地方
  4. 29
    實用日語加入資料庫寫法:新增
  5. 30
    加上資料表後的: 實用日語 列表
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22088 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙